<template>
  <div class="bar">
    <div>
      <i class="iconfont">&#xe690;</i>
      <router-link to="/home" tag="span">首页</router-link>
      <i class="el-icon-arrow-right" v-show="fatherName"></i>
      <router-link tag="span"
        :to="{ path:currentPath + fatherRoute, query: {data:fatherId}}"
        @click="handleRouteChange(fatherId,fatherName)"
      >{{fatherName}}</router-link>
      <i class="el-icon-arrow-right" v-show="childName"></i>
      <router-link tag="span"
        :to="{ path:currentPath + childRoute, query: {data:childId}}" 
        @click="handleRouteChange(childId,childName)"
      >{{childName}}</router-link>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'NavBar',
  data () {
    return {
      id: '',
      asideList: [],
      fatherId: '',
      fatherName: '',
      fatherRoute: '',
      childId: '',
      childName: '',
      childRoute: '',
      timer: null,
      currentPath: '',
    }
  },
  methods: {
    getBarInfo () {
      const _this = this;
      this.id = this.$route.query.data;
      const arr = [];
      axios.get('/api/source/home.json').then(function(response){
        if(response.data.ret && response.data.data){
          const res = response.data.data
          var flag = false;
          for(let i in res){
            if(res[i].id == _this.id){
              arr.push(res[i]);
              _this.fatherId = _this.id;
              _this.fatherName = res[i].title;
              _this.fatherRoute = res[i].routes;
              break;
            }else{
              const chirld = res[i].children;
              for(let j in chirld){
                if(chirld[j].id == _this.id){
                  arr.push(chirld[j]);
                  _this.fatherId = res[i].id;
                  _this.fatherName = res[i].title;
                  _this.fatherRoute = res[i].routes;
                  _this.childId = _this.id;
                  _this.childName = chirld[j].title;
                  _this.childRoute = chirld[j].routes;
                  flag = true;
                }
              }
            }
            if(flag){
              break;
            }
          }
          _this.asideList = arr;
        }
      })
    },
    handleRouteChange (currentId,name) {
      this.$route.meta.title = name + ' - 核客论坛 - Powered by phpwind';
    }
  },
  created () {
    const pageName = this.$route.name;
    if (pageName == 'Detail') {
      this.currentPath = '/detail'
    }
    if (pageName == 'Stick') {
      this.currentPath = '/'
    }
  },
  mounted () {
    this.getBarInfo();
    if (this.id == '00000' ) {
      this.fatherName = '本站新帖';
      this.fatherId = '00000';
    }
  },
  // watch:{
  //   $route (to,from){
  //     if( to.name == 'Detail') {
  //       location.reload();
  //     }
  //   }
  // }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/mixins.styl';
  .bar
    height: $spaceHeight
    line-height: $spaceHeight
    background: $bgcolor-all
    font-size: .24rem
    margin-top: -.68rem
    color: $font-welcome
    i 
      color: $font-black
      font-size: .26rem
    .iconfont
      color: #dadada
    span:hover
      cursor: pointer
      text-decoration: underline
</style>
